import React, { Component, createRef } from 'react'

export default class UNControllerd extends Component {
  constructor() {
    super()
    this.inputRef = createRef()
  }
  render() {
    return (
      <div>
        <h2>UNControllerd</h2>
        {/* 1. input 种的value不依赖于组件的state */}
        {/* 字符串写法 */}
        <input type="text" ref="inputRef" />
        <br />
        {/* 2. callback */}
        <input type="text" ref={(el) => (this.method = el)} />
        <br />
        {/* 3. 对象写法 */}
        <input type="text" ref={this.inputRef} />
        <input
          type="button"
          value="button"
          onClick={() => this.hanldeGetValue()}
        />
      </div>
    )
  }

  componentDidMount() {
    this.method.focus()
  }

  hanldeGetValue() {
    console.log(this.refs.inputRef.value)
    // this.method.focus()
    console.log(this.inputRef.current.value)
  }
}
